<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aaa{width: 30px;height: 30px;background-color: black;float: left;border: rebeccapurple solid 1px}
        .bbb{width: 30px;height: 30px;background-color: black;border: rebeccapurple solid 1px}
    </style>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<div id="room"></div>
<script th:inline="javascript" >

    var socket;
    if(typeof(WebSocket)=="undefined"){
        console.log("不支持");
    }
    else{
        console.log("支持")
        var bathPath= [[${bathPath}]];
        //建立连接
        webSocket=new WebSocket((bathPath+"websocket/game").replace("http","ws"));

        webSocket.onopen=function () {
            console.log("socket连接成功");
        };
        webSocket.onclose=function(){
            alert("game over,连接已断开")
        }
        webSocket.onmessage=function (msg) {
            //蛇的所有坐标队列
            var data=JSON.parse(msg.data.split(".")[0])

            //食物坐标
            foodHang=msg.data.split(".")[1]
            foodLie=msg.data.split(".")[2]

            $("#room").html("");
            //打印地图与蛇与食物
            for(var i=0;i<20;i++){
                // $("#room").append("<p>"+data[i]+"</p>")
                for(var j=0;j<20;j++){
                    var biaoji=0;
                    if(j==19){
                        for(var k=0;k<data.length;k++){
                            var hang=data[k][0];
                            var lie=data[k][1];
                            if(hang==i&&lie==j){
                                $("#room").append("<div class='bbb' style='background-color: aliceblue'></div>");
                                biaoji=1;
                                break;
                            }
                        }
                        if(foodHang==i&&foodLie==j&&biaoji==0){
                            $("#room").append("<div class='bbb' style='background-color: darkgoldenrod'></div>")
                        }
                        else if(biaoji==0){
                            $("#room").append("<div class='bbb'></div>")
                        }

                    } else{
                        for(var k=0;k<data.length;k++){
                            var hang=data[k][0];
                            var lie=data[k][1];
                            if(hang==i&&lie==j){
                                $("#room").append("<div class='aaa' style='background-color: aliceblue'></div>");
                                biaoji=1;
                                break;
                            }
                        }
                        if(foodHang==i&&foodLie==j&&biaoji==0){
                            $("#room").append("<div class='aaa' style='background-color: darkgoldenrod'></div>")
                        }
                        else if(biaoji==0){
                            $("#room").append("<div class='aaa'></div>")
                        }
                    }
                }
            }
        } ;
    }
</script>
<button id="ewq" style="width: 100px;height: 100px" >111</button>
<button id="www" style="width: 100px;height: 100px">www</button>
<button id="qwe" style="width: 100px;height: 100px">111</button><br>
<button id="aaa" style="width: 100px;height: 100px">aaa</button>
<button id="sss" style="width: 100px;height: 100px">sss</button>
<button id="ddd" style="width: 100px;height: 100px">ddd</button>

<script>
    $("#www").click(function () {
        webSocket.send("1");
    })
    $("#ddd").click(function () {
        webSocket.send("2");
    })
    $("#sss").click(function () {
        webSocket.send("3");
    })
    $("#aaa").click(function () {
        webSocket.send("4");
    })
</script>
</body>
</html>